{% extends 'base.html' %}
{% block css%}
<style type="text/css">
</style>
{% endblock %}
{% block body%}
<div class="row">
    <div class="col-md-6">
            <table class="table table-hover form-inline">
                <tr>
                    <td>Segment</td>
                    <td>
                         <input class="form-control" type="text" id="segment" value="192.168.1.">
                         <i class="fa fa-info-circle" style="color: #ccc" title="Format: xxx.xxx.xxx., eg. 192.168.1. "></i>
                    </td>
                </tr>

                <tr>
                    <td>Start</td>
                    <td>
                         <input class="form-control" type="number" id="start_ip" value="1" readonly="readonly" style="background: #eee">
                    </td>
                </tr>

                <tr>
                    <td>End</td>
                    <td>
                         <input class="form-control" type="number" id="end_ip" value="255" readonly="readonly" style="background: #eee">
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <br><br>
                        <button class="btn btn-primary" id="btn_scan_ipaddr">
                        <i class="glyphicon glyphicon-search"></i>
                        Auto-discovery Host Board IP Address

                        &nbsp;&nbsp;
                        <i id="ping_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>

            <div class="progress">
                <div class="progress-bar progress-bar-success active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="progress_val">
                    0%
                </div>
            </div>

        <table class="table" id="cmd_btn_block1">
            <tr>
                <td style="background-color: #FFFFCC; font-size: 22px; color: #99CC66">
                    <span id="cmd_btn_block_info1">-</span>
                </td>
            </tr>
        </table>
    </div>

</div>
{% endblock %}
{% block js%}
{{ super() }}
<script type="text/javascript">
var t;
var scan_status_percent_val = 0;
var REFRESSH_INTERVALS = 0.35 //seconds

function scan_status_update() {
    start_ip=$("#start_ip").val();
    end_ip=$("#end_ip").val();

    step = 100 / ((end_ip - start_ip) * REFRESSH_INTERVALS);

    console.log(step);

    scan_status_percent_val = scan_status_percent_val + step
    scan_status_percent = scan_status_percent_val.toFixed(2) + '%';

    console.log(scan_status_percent_val)
    console.log(scan_status_percent);

    $("#progress_val").html(scan_status_percent);
    $("#progress_val").attr("style", "width: " + scan_status_percent);

    if (scan_status_percent_val > 98 ) {
        scan_status_percent = '98%';
        $("#progress_val").html(scan_status_percent);
        $("#progress_val").attr("style", "width: " + scan_status_percent);
        clearTimeout(t);

    } else {
        t = setTimeout(scan_status_update, REFRESSH_INTERVALS * 1000);
    }
}

$("#btn_scan_ipaddr").click(function(){
    console.log("btn_scan_ipaddr ...");
    $("#ping_loading").show();
    scan_status_percent_val =0;
    $("#cmd_btn_block_info1").html("-");

    scan_status_update();

    url = "/api/btn_scan_ipaddr"
    $.post(url, 
        {
          segment: $("#segment").val(),
          start_ip: $("#start_ip").val(),
          end_ip: $("#end_ip").val()
        },
      function(data, status){
            console.log(data);
            $("#ping_loading").hide();
            $("#cmd_btn_block_info1").html(data);

            scan_status_percent = '100%';
            $("#progress_val").html(scan_status_percent);
            $("#progress_val").attr("style", "width: " + scan_status_percent);
            clearTimeout(t);
        });
});

function connect(ip_val)
{
    //alert("connect " + ip_val);
    $.post(
        "api/btn_writeconfig_and_reconnect", {
            ip_val: ip_val
        },
        function(data, status) {
            console.log("data: " + data);
        }
    );

}

$(document).ready(function() {
    $("#ping_loading").hide();
});
</script>
{% endblock %}